<template>
  <el-card class="content">
    <el-form inline>
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始日期"
          default-time="00:00:00"
          size="mini"
          v-model="startTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束日期"
          default-time="00:00:00"
          size="mini"
          v-model="endTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="getTrendOfAccidentStatistics"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <p v-show="accidentsTrendShow" style="text-align: center">暂无数据</p>
    <div
      id="accidentsTrend"
      v-show="accidentsTrendShows"
      style="height: 73vh"
    ></div>
  </el-card>
</template>

<script>
import echarts from "echarts";
import moment from "moment";
import { getTrendOfAccidentStatistics } from "../../../api/risk-dynamic-judgement";

export default {
  name: "AccidentsTrend",
  props: {
    node: Object,
  },
  data() {
    return {
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      startTime: moment().subtract(1, "months").format("YYYY-MM-DD 00:00:00"),
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      query: {
        page: 1,
        pagesize: 10,
      },
      accidentsTrendShow: false,
      accidentsTrendShows: true,
      accidentsTrendList: [],
    };
  },
  mounted() {
    this.getTrendOfAccidentStatistics();
  },
  methods: {
    async getTrendOfAccidentStatistics() {
      var myChart = echarts.init(document.getElementById("accidentsTrend"));
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.startTime).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(this.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getTrendOfAccidentStatistics({
        startTime: queryData.startTime,
        endTime: queryData.endTime,
        tailingPondId: sessionStorage.getItem("sensorId"),
      });
      if (res.resultCode == 200) {
        this.accidentsTrendShow = false;
        this.accidentsTrendShows = true;
        this.accidentsTrendList = res.parameter;
        var ordinaryDate = [];
        var largerDate = [];
        var majorDate = [];
        var extraSeriousDate = [];
        var timeDate = [];
        for (let i = 0; i < this.accidentsTrendList.length; i++) {
          var obj1 = new Object();
          obj1.value = this.accidentsTrendList[i].ordinaryAccidentNums;
          ordinaryDate[i] = obj1;
          var obj2 = new Object();
          obj2.value = this.accidentsTrendList[i].largerAccidentNums;
          largerDate[i] = obj2;
          var obj3 = new Object();
          obj3.value = this.accidentsTrendList[i].majorAccidentNums;
          majorDate[i] = obj3;
          var obj4 = new Object();
          obj4.value = this.accidentsTrendList[i].extraSeriousAccidentNums;
          extraSeriousDate[i] = obj4;
          var obj5 = new Object();
          obj5.value = this.accidentsTrendList[i].reportTime;
          timeDate[i] = obj5;
        }
        var maxOrdinaryAccidentNums = Math.max.apply(null, ordinaryDate.map(function (o) { console.log(o); return o.value}))
        var maxLargerAccidentNums = Math.max.apply(null, largerDate.map(function (o) {return o.value}))
        var maxMajorAccidentNums = Math.max.apply(null, majorDate.map(function (o) {return o.value}))
        var maxExtraSeriousAccidentNums = Math.max.apply(null, extraSeriousDate.map(function (o) {return o.value}))
        var maxList=[]
        maxList.push(maxOrdinaryAccidentNums,maxLargerAccidentNums,maxMajorAccidentNums,maxExtraSeriousAccidentNums)
        var max=Math.max.apply(null, maxList.map(function (o)  {return o}))
        var minOrdinaryAccidentNums = Math.min.apply(null, ordinaryDate.map(function (o) {return o.value}))
        var minLargerAccidentNums = Math.min.apply(null, largerDate.map(function (o) {return o.value}))
        var minMajorAccidentNums = Math.min.apply(null, majorDate.map(function (o) {return o.value}))
        var minExtraSeriousAccidentNums = Math.min.apply(null, extraSeriousDate.map(function (o) {return o.value}))
        var minList=[]
        minList.push(minOrdinaryAccidentNums,minLargerAccidentNums,minMajorAccidentNums,minExtraSeriousAccidentNums)
        var min=Math.min.apply(null, minList.map(function (o)  {return o}))
        let chartOption = {
          tooltip: {
            trigger: "axis",
            formatter(params) {
              let tip = params[0].name + "<br/>";
              for (let y = 0; y < params.length; y++) {
                tip +=
                  params[y].marker +
                  params[y].seriesName +
                  " : " +
                  params[y].value +
                  "件<br/>";
              }
              return tip;
            },
          },
          color: ["#0066FF", "#EEEE00", "#FF8800", "#CC0000"],
          legend: {
            data: [
              { name: "一般事故", icon: "line" },
              { name: "较大事故", icon: "line" },
              { name: "重大事故", icon: "line" },
              { name: "特大事故", icon: "line" },
            ],
            top: "8px",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            right: "5%",
            show: true,
            feature: {
              saveAsImage: { show: true },
            },
          },
          xAxis: {
            type: "category",
            name: "时间",
            nameLocation: "center",
            nameTextStyle: {
              padding: [10, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
            },
            boundaryGap: false,
            data: timeDate,
          },
          yAxis: {
            name: "个数/" + "件",
            type: "value",
            minInterval: 1,
            max: Math.ceil(max*1.2),
            min:Math.ceil(-1.2*min) ,
          },
          series: [
            {
              name: "一般事故",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#0066FF",
              },
              data: ordinaryDate,
              smooth: false,
            },
            {
              name: "较大事故",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#EEEE00",
              },
              data: largerDate,
              smooth: false,
            },
            {
              name: "重大事故",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#FF8800",
              },
              data: majorDate,
              smooth: false,
            },
            {
              name: "特大事故",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#CC0000",
              },
              data: extraSeriousDate,
              smooth: false,
            },
          ],
        };
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
        setTimeout(function () {
          window.onresize = function () {
            myChart.resize();
          };
        }, 200);
      } else {
        this.accidentsTrendShow = true;
        this.accidentsTrendShows = false;
      }
    },
  },
};
</script>



<style scoped>
.content {
  height: 88vh;
  margin-left: 0.07rem;
}
</style>
